<template>
  <div class="tab">
    <router-link tag="div" to="/recommend" class="tabItem">
      <span>推荐</span>
    </router-link>
    <router-link tag="div" to="/rank" class="tabItem">
      <span>排行</span>
    </router-link>
    <router-link tag="div" to="/singer" class="tabItem">
      <span>歌手</span>
    </router-link>
  </div>
</template>

<script>
export default {
  beforeRouteEnter(to, from, next) {
    return next(vm => {})
  },
  name: 'app',
  data() {
    return {}
  }
}
</script>
<style lang='stylus' scoped>
.tab
  display flex
  width 100%
  height 44px
  font-size 16px
  line-height 44px
  color #fff
  background-color #cc1919
  padding 5px 0px
  box-sizing border-box
  .tabItem
    flex 1
    text-align center
    >span
      padding-bottom 3px
  .router-link-active
    >span
      font-weight bold
      border-bottom 2px solid #fff
</style>
